<template>
  <div class="content-list">
    <div class="content" v-for="video in VideoList" :key="video.id">
      <Card :video="video"></Card>
    </div>
    <AddMore :VideoList="VideoList"></AddMore>
  </div>


</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import homeApi ,{type VideoListModel, type ContentModel} from '@/api/mockHome'
import useHomeStore from '@/stores/home';
const homeStore = useHomeStore()


const VideoList = ref<ContentModel[]>([])
console.log(homeStore.videoList)

const getVideos = async () => {
  try {
    const result = await homeApi.getVideoList()
    VideoList.value = result.content
    console.log(VideoList)
    console.log(result)
  } catch (error) {
    console.log(error)
  }
}


onMounted(() => {
  getVideos()
  homeStore.getHomeRecommend()
})

const { videoList } = homeStore
console.log(homeStore)
console.log(videoList)
</script>

<style scoped lang="scss">
.content-list {
  display: flex;
  flex-wrap: wrap;

  // margin-top: 10px;
  .content {
    margin-right: 20px;

    &:nth-child(5n) {
      margin-right: 0;
    }

    margin-bottom: 20px;
  }


}

</style>